<template>
	<view>

		<up-navbar leftIconColor="#FFFFFF" leftIconSize="44rpx" title="提交订单" placeholder :autoBack="true"
			bgColor="transparent">
		</up-navbar>

		<view class="pay-id border-box flex align-item_center justify-content_space-between" @click="changeGameId">
			<view class="pay-id-data">
				<view>游戏ID</view>
				<view>{{game.id ||'请选择游戏ID'}}</view>
			</view>
			<up-icon name="arrow-right" color='#fff' size='40rpx'></up-icon>
		</view>

		<up-gap height='30rpx'></up-gap>
		<view class="pay-product border-box">
			<view v-for="item in productList" :key="item">
				<view class="pay-product-item">
					<omitProductVue :item="item" />
				</view>
				<view class="pay-product-line"></view>
			</view>
			<view class="pay-product-count flex justify-content_space-between align-item_center">
				<view>商品金额</view>
				<view>{{countPoints}}积分</view>
			</view>
		</view>

		<view class="pay-type border-box">
			<view class="pay-type-title blockStyle">支付方式</view>
			<view class="pay-type-check flex justify-content_space-between align-item_center">
				<view>积分支付</view>
				<image src="https://ryyf.wangjintech.cn/static/image/point/check.png"></image>
			</view>
		</view>

		<up-gap height="300rpx"></up-gap>
		<view class="pay-sumbit" @click="confirm">立即领取</view>

	</view>
</template>

<script setup>
	import omitProductVue from '../components/omitProduct.vue';
	import secondApi from "@/api/biz/second.js"
	import {
		reactive,
		ref
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		back,
		msg
	} from "@/utils/tool.js"

	const confirm = () => {
		if (!game.id) return msg("请选择游戏账号");

		const data = {
			list: createOrderList.value,
			gameNo: game.id,
			cardIds: cardIds.value
		}
		secondApi.createOrder(data).then(res => {
			if (res.code === 0) {
				msg("领取成功");
				back()
			}
		})
	}

	const changeGameId = () => {
		uni.navigateTo({
			url: "/pointProduct/account/index?type=2"
		})
	}

	const game = reactive({
		id: "",
	})

	const createOrderList = ref([]);
	const countPoints = ref(0);
	const cardIds = ref([]);
	const logicPoint = (type) => {
		productList.value.forEach(item => {
			countPoints.value += item.count * item.productRespVO.point
			if (type === 2) cardIds.value.push(item.id)
			createOrderList.value.push({
				productId: item.productRespVO.id,
				count: item.count
			})
		})
	}

	const productList = ref([]);
	const getProduct = () => {
		secondApi.getProduct({
			id: id.value
		}).then(res => {
			productList.value = [{
				productRespVO: res.data,
				count: 1,
				id: 1
			}]

			logicPoint(1)
		})
	}

	const getShopCardList = () => {
		secondApi.getShopCardList().then(res => {
			productList.value = res.data;
			logicPoint(2)
		})
	}

	const id = ref()
	const ids = ref()
	onLoad((option) => {
		if (option.id) {
			id.value = option.id;
			getProduct()
		}
		if (option.ids) {
			ids.value = option.ids;
			getShopCardList()
		}


		uni.$on('selectGameNo', val => {
			game.id = val;
		})
	})
</script>

<style>
	page {
		background: #1B1829;
	}
</style>
<style scoped lang="scss">
	$wh: 690rpx;

	.pay-sumbit {
		width: 580rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: linear-gradient(105deg, #0D7BFA 0%, #7E76E3 100%);
		border-radius: 100rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 140rpx;
	}

	.pay-type {
		width: $wh;
		background: #25223B;
		border-radius: 16rpx;
		padding: 30rpx 30rpx 40rpx;
		margin: 30rpx auto 0;

		&-check {
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			margin-top: 53rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.pay-product {
		width: $wh;

		&-count {
			padding: 30rpx 22rpx;

			view:first-child {
				font-weight: 500;
				font-size: 28rpx;
				color: #EDFAFF;
			}

			view:last-child {
				font-weight: 500;
				font-size: 28rpx;
				color: #FFC75C;
			}
		}

		&-item {
			padding: 30rpx 22rpx;
		}

		&-line {
			width: 690rpx;
			height: 1rpx;
			background: #FFFFFF;
			border-radius: 0rpx;
			opacity: 0.2;
		}

		background: #25223B;
		border-radius: 16rpx;
		margin: 0 auto;
	}

	.pay-id {
		margin: 20rpx auto 0;
		width: $wh;
		height: 156rpx;
		background: #25223B;
		border-radius: 16rpx;
		padding: 30rpx;

		&-data {
			view:first-child {
				font-weight: 500;
				font-size: 28rpx;
				color: #EDFAFF;
				margin-top: 10rpx;
			}

			view:last-child {
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				margin-top: 10rpx;
			}
		}
	}
</style>